<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/meter.css">
    <link rel="stylesheet" href="../css/iview.css">
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/health.css">
</head>
<body style="background: #01060c;">
<div id="cps">
    <!--顶条-->
    <div class="top-boder" style="width: 100%;background: #01060c;margin: 0 auto;border-bottom: 2px solid #1c1b1c;">
        <div class="top clearfix">
            <p class="fl"><a href="javascript:;"  class="logo">哈电集团多能互补远程运维系统</a><i></i></p>
            <!--导航栏-->
            <ul class="fl banner" >
                <li class="fl">
                    <a href="../index.html">
                        <i class="fan_icon"></i>
                        <em>风场状态概览</em>
                    </a>
                </li>
                <li  class="fl tool">
                    <a href="javascript:;">
                        <i class="fan_icon"></i>
                        <em>健康状态分析</em>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <!--中部content-->
    <article class="clearfix">
        <div class="content clearfix">
            <!--中部总体信息-->
            <div class="fl meter" id="meter">
                <div class="meter_t">
                    <h5 class="title">绩效仪表盘</h5>
                    <ul class="meter_pie clearfix">
                        <li class="fl">
                            <div class="chartbox">
                                <i-circle :percent="Number(powerFactor)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#2cb1e4" :trail-width="12" :stroke-width="12">
                                    <span class="demo-Circle-inner" style="color:#2cb1e4; font-size:24px;line-height: 160px;">{{powerFactor}}%</span>
                                </i-circle>
                            </div>
                            <p>功率因数</p>
                        </li>
                        <li class="fl">
                            <div class="chartbox">
                                <i-circle :percent="Number(lower)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#7db349" :trail-width="12" :stroke-width="12">
                                    <span class="demo-Circle-inner" style="color:#7db349; font-size:24px;line-height: 160px;">{{lower}}%</span>
                                </i-circle>
                            </div>
                            <p>发电损失率</p>
                        </li>
                        <li class="fl">
                            <div class="chartbox">
                                <i-circle :percent="Number(powergrid)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#4fb053" :trail-width="12" :stroke-width="12">
                                    <span class="demo-Circle-inner" style="color:#4fb053; font-size:24px;line-height: 160px;">{{powergrid}}%</span>
                                </i-circle>
                            </div>
                            <p>电网调度<br/>匹配率</p>
                        </li>
                        <li class="fl">
                            <div class="chartbox">
                                <i-circle :percent="Number(fanUsage)" trail-color="rgba(255,255,255,0.1)"  stroke-linecap="square"  stroke-color="#7db349" :trail-width="12" :stroke-width="12">
                                    <span class="demo-Circle-inner" style="color:#7db349; font-size:24px;line-height: 160px;">{{fanUsage}}%</span>
                                </i-circle>
                            </div>
                            <p>风机使用率</p>
                        </li>
                        <li class="fl">
                            <p class="p1 kw">{{powerGeneration}}<em>kwh</em></p>
                            <p>累计发电量</p>
                        </li>
                        <li class="fl">
                            <p class="p1 rmb">0.56<em>RMB/kwh</em></p>
                            <p>发电成本</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="fl fan-content">
                <h3 class="fan-title title fl">风机信息</h3>
                <div class="fan-img fl">
                    <div class="heal-name">
                        <dl class="rotor">
                            <dt><a href="javascript:;" class="T_Rotor">风轮</a></dt>
                            <dd>叶片角度：{{datalist.bladeAngle}}度</dd>
                            <dd>风轮转速：{{datalist.revolutionPerMin}}rpm</dd>
                            <dd>5min平均风速：{{datalist.windSpeed5m}}m/s</dd>
                            <dd>风向：{{datalist.windDirection}}度</dd>
                        </dl>
                        <dl class="GBS">
                            <dt><a href="javascript:;" class="T_GB" data-name="T_GBS_Out" data-name1="齿轮箱">机组运行状态</a></dt>
                            <dd>机组控制方式:{{controlMode}} </dd>
                            <dd>机组运行模式:{{runMode}} </dd>
                            <dd>运行状态:{{runStatus}} </dd>
                            <dd>报警状态:{{alarmStatus}} </dd>
                            <!--<dd>滑油温度 : </dd>
                            <dd>冷却水温度 : </dd>-->

                        </dl>
                        <dl class="GW">
                            <dt><a href="javascript:;" class="T_GW" data-name="T_GW_U1" data-name1="发电机">电网电流</a></dt>
                            <dd>输出电流A : {{datalist.outputCurrentA}}A</dd>
                            <dd>输出电流B : {{datalist.outputCurrentB}}A</dd>
                            <dd>输出电流C : {{datalist.outputCurrentC}}A </dd>
                        </dl>
                        <dl class='GW2'>
                            <dt><a href="javascript:;" class="T_GW"   data-name="T_GW_U1" data-name1="发电机">电网电压</a></dt>
                            <dd>电网电压U: {{datalist.gridVoltageU}}V</dd>
                            <dd>电网电压V:{{datalist.gridVoltageV}}V </dd>
                            <dd>电网电压W: {{datalist.gridVoltageW}}V</dd>
                        </dl>
                    </div>
                </div>

                <div class="fan-msg1 fl border">
                    <div class="fl">
                        <p class="fan-name">风机健康值
                            </br>
                            <span>100%</span>
                        </p>
                        <!--<p class="fan-name">100%</p>-->
                    </div>
                    <p class="fan-icon fr">
                        <i class="runStatus">机组运行状态</i>
                        </br>
                        <i class="runStatus font-color">{{runStatus}}</i>
                    </p>
                    <!--<div class="fan-press border"><p class="fan-press-item"></p></div>-->
                </div>
                <!--<ul class="fan-msg fl">
                    <li class="fl">
                        <p class="fl fan-heal-img"></p>
                        <div class="fl fan-heal-content">
                            <p class="color">100%</p>
                            <p class="color-w">健康值</p>
                        </div>
                    </li>
                    <li class="fl">
                        <p class="fl fan-heal-img"></p>
                        <div class="fl fan-heal-content">
                            <p class="color">47kwh</p>
                            <p class="color-w">发电损失</p>
                        </div>
                    </li>
                    <li class="fl">
                        <p class="fl fan-heal-img" ></p>
                        <div class="fl fan-heal-content">
                            <p class="color">12.2RPM</p>
                            <p class="color-w">风轮转速</p>
                        </div>
                    </li>
                    <li class="fl">
                        <p class="fl fan-heal-img"></p>
                        <div class="fl fan-heal-content">
                            <p class="color">5.16m/s</p>
                            <p class="color-w">实时风速</p>
                        </div>
                    </li>
                </ul>-->
                <div class="rander fl">
                    <chart-gus ></chart-gus>
                </div>
            </div>
        </div>
    </article>
    <div class="footer">
        <div class="footer-content clearfix">
            <div class="fl footer-content-chart">
                <h3 class="color-w footer-title title">风机运行状态</h3>
                <div class="chart-his">
                    <!--<chart-component >
                        <p slot="line" name="风速" type="line" itemurl='/msg.json' timing="1000" params="1" linecolor="#54abe8"></p>
                        <p slot="line" name="发电量" type="line" itemurl='/tsconfig.json' timing="1000" params="1" linecolor="#119c64"></p>
                    </chart-component>-->
                    <chartline-component ></chartline-component>
                </div>
            </div>
            <div class="fl footer-content-chart mar">
                <h3 class="color-w footer-title title">运行风险状态</h3>
                <div class="chart-his">
                    <chart-component>
                       <!-- <p slot="line" name="风险状态" type="line" itemurl='code=2' timing="1000" params="1" linecolor="#119c64"></p>-->
                    </chart-component>
                </div>
            </div>
        </div>

    </div>
</div>
<script src="../js/vue.js"></script>
<script src="../js/vue-resource.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/iview.min.js"></script>
<script src="../js/echarts.js"></script>
<script src="../js/fan.js"></script>
<script src="../js/common.js"></script>

<script>


</script>
</body>

</html>